<template>
    <div class="slideViewCardContainer" v-show="this.visible !== 'gone'">
      <div class="slideViewBg" :style="getSlideCardStyle" :class="{
        outline: this.disable && this.disableBg,
      }"></div>
      <div class="slideViewCard" :class="{
        outline: this.disable,
      }" @click="!disable && clickView()">
        <div class="slideInfo">
          <div :class="
            this.language.indexOf('en') !== -1 ? 'slideTitleEn' : 'slideTitle'
          ">
            {{ this.titleProp }}
          </div>
          <div :class="[
            this.language.indexOf('en') !== -1 ? 'slideStateEn' : 'slideState',
          ]">
            {{ getNowState() }}
          </div>
        </div>

        <vue-slider :class="getMySliderCss" v-model="slideValue" :process-style="{
          backgroundColor: this.darkMode === 'dark' ? '#317AF7' : '#0A59F7',
        }" :tooltip="'none'" :adsorb="true" :included="true" :lazy="true" :marks="getMarks"
          @change="sliderValueChanged()" :dotSize="getSlideDotSize" :railStyle="{
            background:
              this.darkMode === 'dark'
                ? 'rgba(255,255,255,0.1)'
                : 'rgba(0,0,0,0.1)',
          }">
          <!-- <template v-slot:tooltip="{ value, focus }">
                                <div :class="['custom-tooltip', { focus }]">
                                  {{ value }}
                                </div>
                              </template> -->
        </vue-slider>
      </div>
      <div class="shadow" @click="showDisableToastMsg()" v-show="this.disable"></div>
  </div>
</template>
<script>
import { toast } from "../../assets/js/device";
import Const from "../../const/const.js";
import {
  WIDTH_PHONE,
  PHONE_RATIO,
  WIDTH_SPREADED,
  SPREADED_RATIO,
  WIDTH_PAD_PORTRAIT,
  PAD_PORTRAIT_RATIO,
  WIDTH_PAD_LANDSCAPE,
  PAD_LANDSCAPE_RATIO,
  WIDTH_STANDARD,
  SPREADED_SCREEN_RATIO,
  selectWidth,
  flexibleWidth,
  flexibleHeight,
  screenDpr,
  screenType,
  screenDescription,
  isIOS,
  isSpreadOn,
  screenSize,
  getSecondPageMarginStyle,
  getSecondPageStyle,
  getDialogFlexAlign,
  getDialogStyle,
  getSingleButtonStyle,
  setScreenResizeListener,
  itemWidth,
} from "../../assets/js/flexible.js";

export default {
  props: {
    deviceTypePro: {
      type: Number,
      default: 1,
    },
    titleProp: {
      type: String,
      default: "",
    },
    slideValueProp: {
      type: Number,
      default: 0,
    },
    slideDataProp: {
      type: Object,
      default: null,
    },
    darkModePro: {
      type: String,
      default: "light",
    },
    languagePro: {
      type: String,
      default: "zh",
    },
    disablePro: {
      type: Boolean,
      default: false,
    },
    visiblePro: {
      type: String,
      default: 'visible',
    },
    disableBgPro: {
      type: Boolean,
      default: true,
    },
    borderRadiusTypePro: {
      type: Number,
      default: 3,
    },
  },
  data() {
    return {
      language: "zh", //语言
      darkMode: "light", //暗黑/白天模式
      deviceType: 1,

      slideValue: 0, //滑条当前值
      visible: "visible", //控件是否可见：visible-可见，invisible-不可见，但仍占据位置，gone-不可见，并且不占据位置
      disable: false, //是否控件处于不可用状态（例如设备离线、故障时）
      disableBg: true, //当控件处于不可用状态时，背景是否跟随不可用

      showShadow: false, //是否显示遮罩（点击遮罩会显示无法点击view时的toast内容）
      borderRadiusType: 3,
    };
  },
  created() {
    // for(var key in this.slideDataProp){
    //   if(key == 0){
    //     // this.slideDataProp[key].labelStyle.margin = ;
    //   }
    //   if(key === "marks"){
    //     this.slideDataProp[key][0].labelStyle.color = this.darkMode === "dark"
    //             ? "rgba(255,255,255,0.6)"
    //             : "rgba(0,0,0,0.6)";
    //   }
    // }
    // for(var key in this.slideDataProp){
    //   console.log("对象解析：key = ",key, "; value = ", this.slideDataProp[key]);
    // }
    // var entries = Object.entries(this.marksProp);
    // for(const [label, labelStyle, style] of entries){
    //   console.log("对象解析: label = ", label);
    //   console.log("对象解析: labelStyle = ", labelStyle);
    // }
  },
  mounted() {
    this.deviceType = screenType;
    this.darkMode = this.darkModePro;
    this.language = this.languagePro;
    this.slideValue = this.slideValueProp;
    this.visible = this.visiblePro;
    this.disable = this.disablePro;
    this.disableBg = this.disableBgPro;
    this.borderRadiusType = this.borderRadiusTypePro;
    // console.log("SlideView: 导角设置 this.borderRadiusType = ", this.borderRadiusType);
  },
  watch: {
    deviceTypePro(newVal) {
      this.deviceType = newVal;
    },
    darkModePro(newVal) {
      this.darkMode = newVal;
    },
    languagePro(newVal) {
      this.language = newVal;
    },
    slideValueProp(newVal) {
      this.slideValue = newVal;
    },
    visiblePro(newVal) {
      this.visible = newVal;
    },
    disablePro(newVal) {
      this.disable = newVal;
    },
    disableBgPro(newVal) {
      this.disableBg = newVal;
    },
    borderRadiusTypePro(newVal) {
      this.borderRadiusType = newVal;
      // console.log("SlideView: 收到导角设置 this.borderRadiusType = ", this.borderRadiusType);
    },
  },
  computed: {
    getSlideCardStyle() {
      var topLeft, topRight, bottomLeft, bottomRight;
      switch (this.borderRadiusType) {
        case 0:
          topLeft = 0; topRight = 0; bottomLeft = 0; bottomRight = 0;
          break;
        case 1:
          topLeft = 16; topRight = 16; bottomLeft = 0; bottomRight = 0;
          break;
        case 2:
          topLeft = 0; topRight = 0; bottomLeft = 16; bottomRight = 16;
          break;
        case 3:
          topLeft = 16; topRight = 16; bottomLeft = 16; bottomRight = 16;
          break;
        default:
          topLeft = 16; topRight = 16; bottomLeft = 16; bottomRight = 16;
      }
      return { borderTopLeftRadius: screenSize(topLeft) + "px", borderTopRightRadius: screenSize(topRight) + "px", borderBottomLeftRadius: screenSize(bottomLeft) + "px", borderBottomRightRadius: screenSize(bottomRight) + "px" };
    },
    getMySliderCss() {
      switch (this.deviceType) {
        case 1: //android手机
        case 101: //iPhone
        case 3: // android Pad横屏
          return this.language.indexOf("en") != -1 ? "mySliderEn" : "mySlider";
        case 2: //android Pad竖屏
        case 102: //iPad
        case 4: //android 折叠屏
          return this.language.indexOf("en") != -1
            ? "mySliderEn"
            : "mySliderPad";
        default:
          return this.language.indexOf("en") != -1 ? "mySliderEn" : "mySlider";
      }
    },

    getMarks() {
      for (var key in this.slideDataProp["marks"]) {
        var keyFloat = parseFloat(key);
        this.slideDataProp["marks"][keyFloat].labelStyle.color =
          this.darkMode === "dark"
            ? "rgba(255,255,255,0.6)"
            : "rgba(0,0,0,0.6)";
        if (keyFloat == 0) {
          this.slideDataProp["marks"][keyFloat].labelStyle.margin =
            this.getWaterTempLabelMargin0(
              this.slideDataProp["marginStart"],
              this.slideDataProp["marginStartEn"]
            );
          // this.slideDataProp["marks"][keyFloat].labelStyle.backgroundColor = "#00ff00";
        } else if (keyFloat == 100) {
          this.slideDataProp["marks"][keyFloat].labelStyle.margin =
            this.getWaterTempLabelMargin100(
              this.slideDataProp["marginEnd"],
              this.slideDataProp["marginEndEn"]
            );
        } else {
          this.slideDataProp["marks"][keyFloat].labelStyle.margin =
            this.getSlideCenterLableMargin();
          //滑条节点背景色（未选中时）
          this.slideDataProp["marks"][keyFloat].style.backgroundColor =
            this.darkMode === "light"
              ? this.slideValue >= keyFloat
                ? "#0A59F7"
                : "rgba(0,0,0,0.2)"
              : this.slideValue >= keyFloat
                ? "#317AF7"
                : "rgba(255,255,255,0.2)";
        }
      }
      return this.slideDataProp["marks"];
    },

    getSlideDotSize() {
      switch (this.deviceType) {
        case 1: //andriod手机
          // console.log("SlideView: dot andriod手机 dotSize = ", screenSize(Const.phoneSlideDotSize));
          return screenSize(Const.phoneSlideDotSize);
        case 2: //android Pad竖屏
          return screenSize(Const.padVSlideDotSize);
        case 3: //android Pad横屏
          return screenSize(Const.padHSlideDotSize);
        case 4: //android 折叠屏
          return screenSize(Const.spreadScreenSlideDotSize);
        case 101: //iPhone
          return screenSize(Const.phoneSlideDotSize);
        case 102: //iPad
          return screenSize(Const.padVSlideDotSize);
        default:
          return screenSize(Const.phoneSlideDotSize);
      }
    },
  },
  methods: {
    //滑条第1个节点的缩进
    getWaterTempLabelMargin0(margin, marginEn) {
      switch (this.deviceType) {
        case 1: //andriod手机
          // console.log("SlideView: marginTop andriod手机: marginTop = ", screenSize(Const.phoneMarginTop));
          return this.language.indexOf("en") != -1
            ? screenSize(Const.phoneMarginTop) + "px " + screenSize(marginEn) + "px"
            : screenSize(Const.phoneMarginTop) + "px " + screenSize(margin) + "px";
        case 2: //android Pad竖屏
          return this.language.indexOf("en") != -1
            ? screenSize(Const.padVMarginTop) + "px " + screenSize(marginEn) + "px"
            : screenSize(Const.padVMarginTop) + "px " + screenSize(margin) + "px";
        case 3: //android Pad横屏
          return this.language.indexOf("en") != -1
            ? screenSize(Const.padHMarginTop) + "px " + screenSize(marginEn) + "px"
            : screenSize(Const.padHMarginTop) + "px " + screenSize(margin) + "px";
        case 4: //android 折叠屏
          // console.log("SlideView: 折叠屏");
          return this.language.indexOf("en") != -1
            ? screenSize(Const.spreadScreenMarginTop) + "px " + screenSize(marginEn) + "px"
            : screenSize(Const.spreadScreenMarginTop) + "px " + screenSize(margin) + "px";
        case 101: //iPhone
          return this.language.indexOf("en") != -1
            ? screenSize(Const.phoneMarginTop) + "px " + screenSize(marginEn) + "px"
            : screenSize(Const.phoneMarginTop) + "px " + screenSize(margin) + "px";
        case 102: //iPad
          return this.language.indexOf("en") != -1
            ? screenSize(Const.padVMarginTop) + "px " + screenSize(marginEn) + "px"
            : screenSize(Const.padVMarginTop) + "px " + screenSize(margin) + "px";
        default:
          return this.language.indexOf("en") != -1
            ? screenSize(Const.phoneMarginTop) + "px " + screenSize(marginEn) + "px"
            : screenSize(Const.phoneMarginTop) + "px " + screenSize(margin) + "px";
      }
    },
    //滑条最后一个节点的缩进
    getWaterTempLabelMargin100(margin, marginEn) {
      switch (this.deviceType) {
        case 1: //andriod手机
          return this.language.indexOf("en") != -1
            ? screenSize(Const.phoneMarginTop) + "px " + screenSize(marginEn) + "px"
            : screenSize(Const.phoneMarginTop) + "px " + screenSize(margin) + "px";
        case 2: //android Pad竖屏
          return this.language.indexOf("en") != -1
            ? screenSize(Const.padVMarginTop) + "px " + screenSize(marginEn) + "px"
            : screenSize(Const.padVMarginTop) + "px " + screenSize(margin) + "px";
        case 3: //android Pad横屏
          return this.language.indexOf("en") != -1
            ? screenSize(Const.padHMarginTop) + "px " + screenSize(marginEn) + "px"
            : screenSize(Const.padHMarginTop) + "px " + screenSize(margin) + "px";
        case 4: //android 折叠屏
          return this.language.indexOf("en") != -1
            ? screenSize(Const.spreadScreenMarginTop) + "px " + screenSize(marginEn) + "px"
            : screenSize(Const.spreadScreenMarginTop) + "px " + screenSize(margin) + "px";
        case 101: //iPhone
          return this.language.indexOf("en") != -1
            ? screenSize(Const.phoneMarginTop) + "px " + screenSize(marginEn) + "px"
            : screenSize(Const.phoneMarginTop) + "px " + screenSize(margin) + "px";
        case 102: //iPad
          return this.language.indexOf("en") != -1
            ? screenSize(Const.padVMarginTop) + "px " + screenSize(marginEn) + "px"
            : screenSize(Const.padVMarginTop) + "px " + screenSize(margin) + "px";
        default:
          return this.language.indexOf("en") != -1
            ? screenSize(Const.phoneMarginTop) + "px " + screenSize(marginEn) + "px"
            : screenSize(Const.phoneMarginTop) + "px " + screenSize(margin) + "px";
      }
    },
    //滑条中间刻度标签（不含头尾两点）的边距设置
    getSlideCenterLableMargin() {
      switch (this.deviceType) {
        case 1: //andriod手机
          return screenSize(Const.phoneMarginTop) + "px 0px";
        case 2: //android Pad竖屏
          return screenSize(Const.padVMarginTop) + "px 0px";
        case 3: //android Pad横屏
          return screenSize(Const.padHMarginTop) + "px 0px";
        case 4: //android 折叠屏
          return screenSize(Const.spreadScreenMarginTop) + "px 0px";
        case 101: //iPhone
          return screenSize(Const.phoneMarginTop) + "px 0px";
        case 102: //iPad
          return screenSize(Const.padVMarginTop) + "px 0px";
        default:
          return screenSize(Const.phoneMarginTop) + "px 0px";
      }
    },
    clickView() { },
    getNowState() {
      return this.slideDataProp["marks"][this.slideValue].label;
    },

    sliderValueChanged() {
      // var index = Math.random(this.slideValue / 25);
      this.$emit("sliderValueChanged", this.slideValue);
    },
    showDisableToastMsg() {
      this.$emit("showDisableClick");
    },
  },
};
</script>
<style scoped>
/* .smallSlideCard {
  display: flex;
  width: 100%;
  height: 64px;
  flex-direction: row;
  background: var(--current-card-background-color);
  background: #ff0000;
} */

/* .smallSlideCard .slideContainer {
  flex: 1;
  width: 100px;
  height: 100%;
  display: flex;
} */

.slideViewCardContainer {
  position: relative;
  width: 100%;
  height: 64px;
  /* background: rgba(255, 255, 0, 0.5); */
}

.slideViewCardContainer .slideViewBg {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 64px;
  background: var(--current-card-background-color);
}

.slideViewCardContainer .slideViewCard {
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 64px;
  display: flex;
  flex-direction: row;
  /* background: #00ff00; */
}


.slideViewCardContainer .shadow {
  position: absolute;
  z-index: 3;
  width: 100%;
  height: 100%;
  /* background: rgba(0, 255, 0, 0.5); */
}

.slideViewCardContainer .slideViewCard .slideInfo {
  height: 100%;
  width: 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 16px;
  /* background-color: #00ff00; */
}

.slideViewCardContainer .slideViewCard .slideInfo .slideTitle {
  color: var(--current-primary-color);
  font-size: 16px;
}

.slideViewCardContainer .slideViewCard .slideInfo .slideTitleEn {
  color: var(--current-primary-color);
  font-size: 12px;
}

.slideViewCardContainer .slideViewCard .slideInfo .slideState {
  color: var(--current-second-title-color);
  font-size: 12px;
  margin-top: 2px;
  /* background: #ff0000;  */
}

.slideViewCardContainer .slideViewCard .slideInfo .slideStateEn {
  color: var(--current-second-title-color);
  font-size: 10px;
  margin-top: 2px;
}

.slideViewCardContainer .slideViewCard .mySlider {
  /* flex: 1; */
  /* width: 100px; */
  /* height: 100%; */
  margin-left: 8px;
  margin-right: 16px;
  margin-top: 20px;
  /* background-color: #ff0000; */
}

.slideViewCardContainer .slideViewCard .mySliderEn {
  flex: 1;
  width: 100px;
  height: 30px;
  margin-left: 8px;
  margin-right: 16px;
  margin-top: 14px;
  /* background-color: #ff0000; */
}

.slideViewCardContainer .slideViewCard .mySliderPad {
  flex: 1;
  width: 100px;
  height: 30px;
  margin-left: 8px;
  margin-right: 16px;
  margin-top: 16px;
  /* background-color: #ff0000; */
}
</style>
